<template>
	<view class="big-box">
		<!-- 头像栏 -->
		<view class="one-box">
			<view class="one-box-left">
				<!-- 头像框 -->
				<view class="touxiang">
					<image class="touxiang-pic" :src="self_user_data.pic" mode="widthFix"></image>
				</view>
				<!-- 用户名 /收货地址/关注店铺-->
				<view class="name-info">
					<!-- 用户名 -->
					<view class="username">
						fateloser
					</view>
					<!-- 收货地址/关注店铺 -->
					<view class="address-star">
						<!-- 收货地址 -->
						<view class="address">
							<image class="address-pic" src="../../static/pic/my/my-dizhi.png" mode=""></image>
							收货地址
						</view>
						<!-- 关注店铺 -->
						<view class="star">
							<image class="star-pic" src="../../static/pic/my/my-dianpu.png" mode=""></image>
							关注店铺
						</view>
					</view>
				</view>
			</view>

			<view class="one-box-right">
				<!-- 右侧 官方客服/设置 -->
				<view class="kefu-setting">
					<!-- 官方客服 -->
					<view class="kefu">
						<image class="kefu-pic" src="../../static/pic/my/my-kefu.png" mode=""></image>
						官方客服
					</view>
					<!-- 设置 -->
					<view class="setting">
						<image class="setting-pic" src="../../static/pic/my/my-setting.png" mode=""></image>
						设置
					</view>
				</view>
			</view>

		</view>
		<!-- 第二栏：节省/88vip -->
		<view class="two-box">
			<!-- 节省信息... -->
			<view class="saving" v-for="item of savArr" :key="item.fid">
				<!-- 节省金额栏/更多 -->
				<view class="saving-more">
					<!-- 为你节省 -->
					<view class="saving-foru">
						为你节省￥
						<view :style="suitSMtSize(item.savMoney)">
							{{item.savMoney}}
						</view>
					</view>
					<!-- 更多 -->
					<view class="more">
						更多
					</view>
				</view>
				<!-- 省钱卡/红包/淘宝币抵/天猫积分 -->
				<view class="saving-four-item">
					<!-- 省钱卡 -->
					<view class="saving-card">
						<!-- 标题 -->
						<view class="title-four">
							省钱卡
						</view>
						<!-- 内容跟 -->
						<view class="info-four">
							{{item.savCardText}}
						</view>
					</view>
					<!-- 红包 -->
					<view class="saving-hongbao">
						<!-- 标题 -->
						<view class="title-four">
							红包
						</view>
						<!-- 带单位的金额 -->
						<view class="dwnum-four">
							￥
							<view class="num" :style="suitFourSize(item.savHongbao)">
								{{item.savHongbao}}
							</view>
						</view>
					</view>
					<!-- 淘金币抵 -->
					<view class="saving-jinbi">
						<!-- 标题 -->
						<view class="title-four">
							淘金币抵
						</view>
						<!-- 带单位的金额 -->
						<view class="dwnum-four">
							￥
							<view class="num">
								6205
								<view class="small">
									.41
								</view>
							</view>
						</view>
					</view>
					<!-- 天猫积分 -->
					<view class="saving-jifen">
						<!-- 标题 -->
						<view class="title-four">
							天猫积分
						</view>
						<!-- 不带单位的数量 -->
						<view class="num">
							739
						</view>
					</view>
				</view>
				<!-- 红包余额 -->
				<view class="hongbao-last">
					<!-- 红包余额 左侧 -->
					<view class="hongbao-last-left">
						<!-- 红包图片 -->
						<image class="hongbao-pic" src="../../static/pic/my/my-hongbao.png" mode=""></image>
						<!-- 剩余金额/到期时间 -->
						<view class="last-deadline">
							<!-- 剩余金额 -->
							<view class="last-money">
								<view class="money">
									24元
								</view>
								红包待使用
							</view>
							<!-- 截止日期 -->
							<view class="deadline">
								<view class="time">
									20:30:40
								</view>
								后失效
							</view>
						</view>
					</view>
					<!-- 红包余额 右侧 -->
					<view class="hongbao-last-right">
						<!-- 去使用按钮 -->
						<view class="gouse-btn">
							去使用
						</view>
					</view>
				</view>
			</view>
			<!-- 88vip -->
			<view class="vip-88">
				<!-- 88vip 标题 -->
				<view class="title">
					88VIP
				</view>
				<!-- 中间图标 -->
				<view class="middle">
					<image class="middle-pic" src="../../static/pic/my/88vip.png" mode=""></image>
				</view>
				<!-- 描述 -->
				<view class="describe">
					<!-- 第一句 -->
					<view class="sen-one">
						立项海量会员特权
					</view>
					<!-- 第二句 -->
					<view class="sen-two">
						查看更多权益
					</view>
				</view>
			</view>
		</view>
		<!-- 订单栏 -->
		<view class="three-box">
			<!-- 我的订单/全部 -->
			<view class="mydd-title">
				<!-- 我的订单 -->
				<view class="title">
					我的订单
				</view>
				<!-- 全部 -->
				<view class="all">
					全部
				</view>
			</view>
			<!-- 我的订单功能 -->
			<view class="mydd-func">
				<!-- 单个功能 -->
				<view class="mydd-func-item" v-for="item of funcArr" :key="item.aid">
					<image class="mydd-func-pic" :src="item.picUrl" mode=""></image>
					<view class="mydd-func-pic-msg">{{item.msg}}</view>
					{{item.text}}
				</view>
			</view>
		</view>
		<!-- 第四栏：快递/收藏/足迹 -->
		<view class="four-box">
			<!-- 快递/收藏/足迹 item -->
			<!-- 快递与收藏 基本相同可以相同样式 -->
			<!-- 基础五格子 样式 -->
			<view class="base-five-box" v-for="item of fourArr" :key="item.fid">
				<!-- 上方盒子 -->
				<view class="top-box">
					<!-- 标题 -->
					<view class="title">
						{{item.title}}
						<view class="title-circle">

						</view>
					</view>
					<!-- 信息 -->
					<view class="info">
						{{item.titleInfo}}
					</view>
				</view>
				<!-- 中间三个盒子类型 -->
				<view class="middle-three-box" v-if="item.class ==2">
					<view class="middle-three-box-item" v-for="i of item.three" :key="i.tid">
						<image class="pic" :src="i.tPicUrl" mode="" :style="i.tstyle"></image>
						{{i.tText}}
					</view>
				</view>
				<!-- 中间图片盒子 -->
				<view class="middle-box" v-if="item.class==1">
					<!-- 图片 -->
					<image class="pic" :src="item.midPicUrl" mode=""></image>
				</view>
				<!-- 下方盒子 -->
				<view class="bottom-box" v-if="item.class==1">
					<!-- 描述 -->
					<view class="tip">
						<!-- 图标+描述 -->
						<view class="pic-text">
							<image class="pic" :src="item.tipPicUrl" mode=""></image>
							{{item.tipText}}
						</view>
						<!-- 橙色文本 -->
						<view class="org-text">
							{{item.tipOrgText}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				self_user_data: {
					uid: '123456789',
					pic: "../../static/image/user/user-self.png"
				},
				savArr: [{
					fid: "safhzlkv",
					savMoney: 273,
					savCardText: "立即查看",
					savHongbao: 4000,
					savTbb: 6205,
					savTbbSmall: 41,
					savPoints: 739,
					unuseHongbao: 530,
					deadline: '10:34:52'
				}],
				funcArr: [{
					aid: "oz1241cxza5",
					picUrl: "../../static/pic/my/my-fukuan.png",
					text: "待付款",
					msg: '5'
				}, {
					aid: "263653dszx",
					picUrl: "../../static/pic/my/my-fahuo.png",
					text: "待发货",
					msg: '99+'
				}, {
					aid: "352bfdh783",
					picUrl: "../../static/pic/my/my-shouhuo.png",
					text: "待收货",
					msg: '99+'
				}, {
					aid: "3252vu84",
					picUrl: "../../static/pic/my/my-pingjia.png",
					text: "待评价",
					msg: '2'
				}, {
					aid: "zx245662",
					picUrl: "../../static/pic/my/my-shouhou.png",
					text: "退款/售后",
					msg: '13'
				}, ],
				fourArr: [{
						fid: "1h1haku",
						title: "快递",
						titleInfo: "2个快递更新",
						midPicUrl: "../../static/pic/my/my-good.png",
						tipPicUrl: "../../static/pic/my/my-box.png",
						tipText: "支付提醒",
						tipOrgText: "请尽快支付",
						// 基础五个盒子baseFive 样式
						class: "1"
					},
					{
						fid: "3215cx",
						title: "收藏",
						titleInfo: "查看最近收藏",
						midPicUrl: "../../static/pic/my/my-lianzi.png",
						tipPicUrl: "../../static/pic/my/my-youhui.png",
						tipText: "有优惠",
						tipOrgText: "每300减30",
						// 基础五个盒子baseFive 样式
						class: "1"
					},
					{
						fid: "32222215cx",
						title: "足迹",
						titleInfo: "查看最近收藏",
						midPicUrl: "../../static/pic/my/my-lianzi.png",
						tipPicUrl: "../../static/pic/my/my-youhui.png",
						tipText: "有优惠",
						tipOrgText: "每300减30",
						// 中间3个盒子样式 
						class: "2",
						three: [{
							tid: "sdau124",
							tPicUrl: "../../static/pic/my/my-tPet.png",
							tText: "我的足迹",
							tstyle: {
								backgroundColor: "rgb(255, 100, 73)"
							}
						}, {
							tid: "4884bc",
							tPicUrl: "../../static/pic/my/my-tLife.png",
							tText: "淘宝人生",
							tstyle: {
								backgroundColor: "rgb(252,128,35)"
							}
						}, {
							tid: "dfsga75",
							tPicUrl: "../../static/pic/my/my-tHongbao.png",
							tText: "红包签到",
							tstyle: {
								backgroundColor: "rgb(253,222,158)"
							}
						}]
					},
				]
			};
		},
		methods: {
			suitSMtSize(num) {
				let str = num.toString()
				if (str.length <= 3) {
					return {
						fontSize: "40rpx"
					}
				} else if (str.length == 4) {
					return {
						fontSize: "38rpx"
					}
				} else if (str.length == 5) {
					return {
						fontSize: "38rpx"
					}
				} else {
					return {
						fontSize: "30rpx"
					}
				}
			},
			suitFourSize(num) {
				let str = num.toString()
				if (str.length == 3) {
					return {
						fontSize: "40rpx"
					}
				} else if (str.length == 3) {
					return {
						fontSize: "36rpx"
					}
				} else if (str.length == 4) {
					return {
						fontSize: "34rpx"
					}
				} else {
					return {
						fontSize: "26rpx"
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: rgb(252, 242, 233);
	}

	.big-box {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	.one-box {
		margin: 0 2%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 96%;
		height: 200rpx;

		.one-box-left {
			display: flex;
			align-items: center;
		}

		.one-box-right {
			display: flex;
			padding-top: 6%;
			height: 94%;
		}


		.touxiang {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 140rpx;
			height: 140rpx;
			border-radius: 140rpx;
			border: 4rpx solid rgb(255, 127, 80);
			background-color: orange;
			overflow: hidden;

			.touxiang-pic {
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}

		.name-info {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			height: 100%;
			width: 350rpx;

			.username {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				height: 50%;
				width: 100%;
				font-size: 40rpx;
			}

			.address-star {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 50%;
				width: 100%;
				font-size: 26rpx;

				.address {
					position: relative;
					display: flex;
					align-items: center;
					padding-right: 20rpx;

					.address-pic {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}

				.address::after {
					position: absolute;
					top: 20rpx;
					right: -15rpx;
					content: '';
					width: auto;
					min-width: 30rpx;
					height: 4rpx;
					background: rgb(210, 210, 210);
					border-radius: 2rpx;
					display: block;
					margin-top: 2rpx;
					transform: rotate(90deg);
				}

				.star {
					display: flex;
					align-items: center;
					margin-left: 20rpx;

					.star-pic {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
			}

		}

		.kefu-setting {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: 24rpx;
			height: 100%;
			width: 180rpx;

			.kefu {
				display: flex;
				flex-direction: column;
				align-items: center;

				.kefu-pic {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.setting {
				display: flex;
				flex-direction: column;
				align-items: center;

				.setting-pic {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}

	.two-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 320rpx;
		width: 96%;
		margin: 0 2%;

		.saving {
			display: flex;
			flex-direction: column;
			border-radius: 30rpx;
			width: 68%;
			height: 100%;
			background-color: #fff;
			border: 2rpx solid #fff;

			.saving-more {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 80rpx;

				.saving-foru {
					display: flex;
					align-items: center;
					width: 50%;
					height: 100%;
					color: #fff;
					font-size: 26rpx;
					background: linear-gradient(to right, rgb(249, 142, 44), rgb(255, 64, 5));
					border-top-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					padding-left: 20rpx;

					.money {
						font-size: 36rpx;
					}
				}

				.more {
					position: relative;
					font-size: 26rpx;
					color: rgb(150, 150, 150);
					padding-right: 40rpx;
					cursor: pointer;
				}

				.more::after {
					position: absolute;
					top: 13rpx;
					right: 22rpx;
					content: "";
					width: 10rpx;
					height: 10rpx;
					border-right: 2rpx solid rgb(150, 150, 150);
					border-bottom: 2rpx solid rgb(150, 150, 150);
					transform: rotate(-45deg);
					/* 添加过渡 */
					transition: all .4s;
				}
			}


			.saving-four-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 120rpx;
				width: 96%;
				margin: 0 2%;

				.title-four {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 60rpx;
					width: 100%;
					font-size: 26rpx;
					color: rgb(150, 150, 150)
				}

				.info-four {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 52rpx;
					width: 100%;
					font-size: 24rpx;
					font-weight: 600;
				}

				.dwnum-four {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 52rpx;
					width: 100%;
					font-size: 26rpx;
				}

				.num {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 52rpx;
					font-size: 34rpx;
					font-weight: 600;

					.small {
						display: flex;
						font-size: 26rpx;
					}
				}

				.saving-card {
					flex: 1;
					display: flex;
					flex-direction: column;
				}

				.saving-hongbao {
					flex: 1;
					display: flex;
					flex-direction: column;
				}

				.saving-jinbi {
					flex: 1;
					display: flex;
					flex-direction: column;
				}

				.saving-jifen {
					flex: 1;
					display: flex;
					flex-direction: column;
				}
			}

			.hongbao-last {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				width: 96%;
				margin: 10rpx 2%;
				border-radius: 20rpx;
				background-color: rgb(255, 236, 235);

				.hongbao-last-left {
					display: flex;
					align-items: center;
					justify-content: center;

					.hongbao-pic {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 100rpx;
						width: 100rpx;
					}

					.last-deadline {
						display: flex;
						flex-direction: column;
						justify-content: center;

						.last-money {
							display: flex;

							.money {
								color: #f00;
							}
						}


						.deadline {
							display: flex;
							font-size: 30rpx;
							color: rgb(255, 100, 73);

							.time {}
						}

					}
				}

				.hongbao-last-right {
					display: flex;
					align-items: center;
					justify-content: center;

					.gouse-btn {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 10rpx;
						padding: 10rpx 20rpx;
						background-color: rgb(255, 46, 23);
						color: #fff;
						border-radius: 30rpx;
						font-size: 26rpx;
					}
				}
			}
		}

		.vip-88 {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border-radius: 30rpx;
			width: 28%;
			height: 100%;
			border: 2rpx solid #fff;
			background-color: yellow;
			background: linear-gradient(rgb(255, 236, 235), #fff 30%, #fff);

			.title {
				margin-left: 20rpx;
				color: rgb(249, 142, 44);
				font-size: 40rpx;
			}

			.middle {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100rpx;

				.middle-pic {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.describe {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.sen-one {
					font-size: 24rpx;
					font-weight: 600;
				}

				.sen-two {
					font-size: 24rpx;
					color: rgb(150, 150, 150);
					letter-spacing: 1rpx;
					cursor: pointer;
				}
			}

		}

	}

	.three-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 200rpx;
		width: 96%;
		margin: 20rpx 2%;
		background-color: #fff;
		border-radius: 30rpx;

		.mydd-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 60rpx;

			.title {
				display: flex;
				align-items: center;
				width: 50%;
				height: 100%;
				padding-left: 20rpx;
				font-size: 32rpx;
				font-weight: 600;
			}

			.all {
				position: relative;
				font-size: 26rpx;
				color: rgb(150, 150, 150);
				padding-right: 40rpx;
				cursor: pointer;
			}

			.all::after {
				position: absolute;
				top: 13rpx;
				right: 22rpx;
				content: "";
				width: 10rpx;
				height: 10rpx;
				border-right: 2rpx solid rgb(150, 150, 150);
				border-bottom: 2rpx solid rgb(150, 150, 150);
				transform: rotate(-45deg);
				/* 添加过渡 */
				transition: all .4s;
			}
		}

		.mydd-func {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 140rpx;
			width: 100%;

			.mydd-func-item {
				position: relative;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				.mydd-func-pic {
					position: relative;
					width: 60rpx;
					height: 60rpx;
				}

				.mydd-func-pic-msg {
					position: absolute;
					top: -20rpx;
					right: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 48rpx;
					height: 48rpx;
					background-color: rgb(245, 103, 34);
					border-radius: 48rpx;
					color: #fff;
					font-size: 24rpx;
				}
			}
		}
	}

	.four-box {
		display: flex;
		width: 96%;
		margin: 0 2%;
		height: 400rpx;
		background-color: #fff;
		border-radius: 30rpx;

		// 基础五个盒子样式
		.base-five-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			height: 100%;
			width: 100%;

			.top-box {
				width: 80%;
				height: 80rpx;
				padding: 10rpx 10%;

				.title {
					display: flex;
					align-items: center;
					font-weight: 600;

					.title-circle {
						position: relative;
						margin-left: 10rpx;
						width: 30rpx;
						height: 30rpx;
						background-color: rgb(2, 2, 2);
						border-radius: 30rpx;
						cursor: pointer;
					}

					.title-circle::after {
						position: absolute;
						top: 10rpx;
						right: 12rpx;
						content: "";
						width: 6rpx;
						height: 6rpx;
						border-right: 4rpx solid rgb(255, 255, 255);
						border-bottom: 4rpx solid rgb(255, 255, 255);
						transform: rotate(-45deg);
						/* 添加过渡 */
						transition: all .4s;
					}
				}

				.info {
					font-size: 26rpx;
					color: rgb(150, 150, 150);
				}
			}

			.middle-three-box {
				padding: 10rpx 10%;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				height: 270rpx;
				width: 80%;


				.middle-three-box-item {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;

					.pic {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 60rpx;
						width: 60rpx;
						border-radius: 60rpx;
						overflow: hidden;
						margin-right: 10rpx;
					}
				}
			}

			.middle-box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80%;
				height: 200rpx;
				padding: 0 10%;
				border-left: 2rpx solid rgb(210, 210, 210);

				.pic {
					display: flex;
					justify-content: center;
					justify-content: center;
					align-items: center;
					width: 160rpx;
					height: 160rpx;
				}
			}

			.bottom-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 80%;
				height: 80rpx;
				padding: 0 10%;
				margin-bottom: 30rpx;

				.tip {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.pic-text {
						font-size: 26rpx;
						font-weight: 600;

						.pic {
							width: 30rpx;
							height: 30rpx;
							margin-right: 6rpx;
						}
					}

					.org-text {
						font-size: 26rpx;
						color: rgb(255, 100, 73);
						font-weight: 600;
					}
				}
			}
		}


		// 把第一个左边边框关闭
		.base-five-box:nth-child(1) {
			.middle-box {
				border: none;
			}
		}
	}
</style>